$("sidebar").load("sidebar.html");
$("header").load("header.html");
$("nav").load("nav.html");
$("footer").load("mainfooter.html");
class goods {
	constructor(goods) {
	    this.GOODS = goods;
		this.arr = [];
	}
	getData() {
		let that = this;
		let xhr = new XMLHttpRequest();
		xhr.open("get", "json/main.json", true);
		xhr.send();
		xhr.onreadystatechange = function() {
			if (xhr.readyState == 4 && xhr.status == 200) {
				that.load(xhr.responseText);
			}
		}
	}
	load(resText) {
		this.arr = JSON.parse(resText);
		this.setBgc();
	}
	setBgc() {
		var storage=window.localStorage;
			this.GOODS.innerHTML = `
			<div id='goods_left'>
			<div id="mask">
			</div>
			<img src="${this.arr[storage.id].img}">
			</div>
			<div id="big-box">
			<img id="big" src="${this.arr[storage.id].img}"><img>
			</div>
			<div id='goods_right'>
			<ul>
			<li>${this.arr[storage.id].title}</li>
			<li>￥${this.arr[storage.id].Money}</li>
			<li>运费:新人包邮</li>
			<li>国家药监局提示：化妆品不能宣称医疗作用，也没有治疗作用，宣称治疗儿童湿疹等皮肤病的产品不属于化妆品。</li>
			<li id="button">加入购物车</li>
			</ul>
			</div>`
		
	}
	
} 
let oDiv = document.getElementById("goods");
let o = new goods(oDiv);
o.getData();
document.onmouseover =function(){
		let oSmallBox = document.querySelector("#goods_left");
		let oMask = document.querySelector("#mask");
		let oBigBox = document.querySelector("#big-box");
		let img = document.querySelector("#big");
		let e = new Magnifier(oSmallBox, oMask, oBigBox,img);
		let oBtn = document.getElementById("button");
		oBtn.onclick = function(){
			window.location = "goodscart.html";
		}
	}

	class Magnifier {
		constructor(newSmallBox, newMask, newBigBox,newimg) {
			this.oSmallBox = newSmallBox;
			this.oMask = newMask;
			this.oBigBox = newBigBox;
			this.oImg = newimg;
			this.eventBind();
		}
		mouseover() {
			let that = this;
			this.oSmallBox.onmouseover = function() {
				that.oMask.style.display = "block";
				that.oBigBox.style.display = "block";
			}
		}
		mouseout() {
			let that = this;
			this.oSmallBox.onmouseout = function() {
				that.oMask.style.display = "none";
				that.oBigBox.style.display = "none";
			}
		}
		mousemove() {
			
			let that = this;
			this.oSmallBox.onmousemove = function(evt) {
				var e = evt || event;
				var left = e.pageX - this.offsetLeft - that.oMask.offsetWidth / 2;
				var top = e.pageY - this.offsetTop - that.oMask.offsetHeight / 2;
				if (left < 0) {
					left = 0;
				}
				let maxLeft = this.offsetWidth - that.oMask.offsetWidth;
				if (left > maxLeft) {
					left = maxLeft;
				}
				if (top < 0) {
					top = 0;
				}
				let maxTop = this.offsetHeight - that.oMask.offsetHeight;
				if (top > maxTop) {
					top = maxTop;
				}
				var x = that.oBigBox.offsetWidth * left / that.oMask.offsetWidth;
				var y = that.oBigBox.offsetHeight * top / that.oMask.offsetHeight;
				that.oMask.style.left = left + "px";
				that.oMask.style.top = top + "px";
				that.oImg.style.left = left/4 + "px";
				that.oImg.style.top = top/4 + "px";
	
			}
		}
	
		eventBind() {
			this.mouseover();
			this.mouseout();
			this.mousemove();
	}
	}
	
	
	